<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        
        .out{
            width: 300px;
            height: 500px;
            margin: 100px auto;
            border:1px #ccc solid;
        }

       .content{
           width: 100%;
           height: 400px;
            border-bottom: 1px #ccc solid;

       }

   .input_div{
         height: 100px;
        text-align: center;
   }
     </style>
</head>
<body>

       <div class='out'>
           <div class='content'></div>
           <div class='input_div'>
               <input type="text" id='msg' style='margin-top: 15px;margin-bottom: 15px;'>
               <br>
               <button>发送(增加)</button>
               <button>撤回(删除)</button>
               <button>修改(替换)</button>
            </div>
       </div>
    
</body>
</html>
<script>

//获得显示信息节点对象
let contentObj = document.querySelector('.content');
//获得输入框节点对象
let inputObj =document.querySelector('#msg');
//获得需要操作的按钮的集合
let btnList = document.getElementsByTagName('button');

//给每个按钮绑定响应的事件（明天详讲）
//发送(添加)
btnList[0].onclick=()=>{
    
}
//撤回(删除)
btnList[1].onclick=()=>{
    
}
//修改(替换)
btnList[2].onclick=()=>{
    
}




</script>

